<template>
  <a-drawer :open="visible" title="预订货单详情" @close="onClose">
    <template #closeIcon>
      <close @on-close="onClose" />
    </template>
    <a-card size="small" title="基本信息">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="单据编号">{{ options.no }}</a-descriptions-item>
        <a-descriptions-item label="订货名称">{{ options.name }}</a-descriptions-item>
        <a-descriptions-item label="收款方式">先收款再发货</a-descriptions-item>
        <a-descriptions-item label="门店名称">{{ options.store?.store_name }}</a-descriptions-item>
        <a-descriptions-item label="业务员">{{ options.salesman?.rename }}</a-descriptions-item>
        <a-descriptions-item label="订货金额(元)">{{ options.detail_sum }}</a-descriptions-item>
        <a-descriptions-item label="已履约金额(元)">{{ options.fulfilled_price }}</a-descriptions-item>
        <a-descriptions-item label="未履约金额(元)">{{ options.un_fulfilled_price }}</a-descriptions-item>
        <a-descriptions-item label="单据状态">{{ getDescByValue('STATUS_THREE_ENUM', options?.status) }}</a-descriptions-item>
        <a-descriptions-item label="履约状态">{{ getDescByValue('PERFORMANCE_TYPE_ENUM', options?.performance_status) }}</a-descriptions-item>
        <a-descriptions-item label="制单时间">{{ options?.create_time }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'Inventory'">
        <ReservationInventoryTable :enterpriseId="options.detail" />
      </template>
      <template v-if="activeKey === 'order'">
        <ReservationOrderTable :enterpriseId="options" />
      </template>
      <template v-if="activeKey === 'performance'">
        <ReservationPerformanceTable :enterpriseId="options.orderDetails" />
      </template>
      <template v-if="activeKey === 'log'">
        <ReservationTracerTimeline :tableData="options.relatedLog" />
      </template>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ReservationTracerTimeline from './reservation-tracer-timeline.vue'
import ReservationInventoryTable from './reservation-Inventory-table.vue'
import ReservationOrderTable from './reservation-order-table.vue'
import ReservationPerformanceTable from './reservation-performance-table.vue'
import { useEnums } from '@/hooks/plugins/useEnums'
import { inject } from 'vue'
import close from '@/components/framework/close/index.vue'
const compactModeClass = inject('compactModeClass')
const { getDescByValue } = useEnums()
defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref({})
// 详情tab
const activeKey = ref('Inventory')
const tabList = [
  {
    key: 'Inventory',
    tab: '订货信息'
  },
  {
    key: 'order',
    tab: '订货款'
  },
  {
    key: 'performance',
    tab: '履约记录'
  },
  {
    key: 'log',
    tab: '日志记录'
  }
]

function showDrawer(item) {
  options.value = item
  visible.value = true
}

const onClose = () => {
  visible.value = false
}
</script>
